<!DOCTYPE html>
<html lang="es">
    <head>
        <base href="/betporra/" />
        <meta charset="utf-8">
        <meta content='True' name='HandheldFriendly' />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="shortcut icon" href="favicon.ico">

        <title>Mesa Apuestas | betporra.com</title>

        <!-- Bootstrap core CSS -->
        <link href="web/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="web/font-awesome/css/font-awesome.min.css">
        <!--<link rel="stylesheet" href="web/css/slider.css">-->


        <link href="web/css/simple-slider.css" rel="stylesheet" type="text/css" />
        <link href="web/css/simple-slider-volume.css" rel="stylesheet" type="text/css" />

        <link href="web/css/datepicker.css" rel="stylesheet" type="text/css" />

        <!-- Custom styles for this template -->
        <link href="web/css/style.css" rel="stylesheet">

        <link href="web/css/animate.css" rel="stylesheet">

        <link href="web/css/bootstrapValidator.css" rel="stylesheet">

        <!-- Just for debugging purposes. Don't actually copy this line! -->
        <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="web/js/jquery-1.10.2.js"></script>
        <!--<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>-->
        <script src="web/js/bootstrap.min.js"></script>
        <script src="web/js/validator/bootstrapValidator.min.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="inicio"><img src="web/images/banner.png" alt="banner" height="20"/></a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="competiciones"><?php echo LABEL_MENUCOMPETICIONES ?></a></li>
                        <li><a href="mis_apuestas"><?php echo LABEL_MENUMISAPUESTAS ?></a></li>
                        <li><a href="regalos"><?php echo LABEL_MENUREGALOS ?></a></li>
                        <li><a href="lenguaje/es"><img src="web/flags/flag_spain.png" class="img-responsive" alt="Español"style="max-height:20px;"/></a></li>
                        <li><a href="lenguaje/en"><img src="web/flags/flag_united_kingdom.png" class="img-responsive" alt="Ingles" style="max-height:20px;" /></a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-user">
                        <?php
                        $obj_usuario = new Usuario();
                        $obj_usuario->get_by_usuario($_SESSION['betporra_nombre']);
                        ?>
                        <li class="hidden-xs">
                            <img src="web/images/users/<?php echo $obj_usuario->imagen ?>" height="50" width="50" class="img-circle" style="background-color:rgba(255,255,255,1);">
                        </li>
                        <li class="dropdown user-dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><div class="pull-left"><p style="margin-top:-8px;"><?php echo $obj_usuario->usuario ?></p><p style="margin-top:-10px; margin-bottom:-20px;"><small><?php echo $obj_usuario->puntos ?> bp</small></span></p></div> <div class="fa fa-caret-down" style="margin-left: 10px;"></div></a>
                            <ul class="dropdown-menu">
                                <li><a href="perfil"><i class="fa fa-user"></i> <?php echo LABEL_MENUPERFIL ?></a></li>
                                <li><a href="mis_apuestas"><i class="fa fa-inbox"></i> <?php echo LABEL_MENUMISAPUESTAS ?></a></li>
                                <li><a href="mis_regalos"><i class="fa fa-gift"></i> <?php echo LABEL_MENUMISREGALOS ?></a></li>
                                <li class="divider"></li>
                                <li><a href=""><i class="fa fa-money"></i> <?php echo $obj_usuario->puntos ?> betpoints</a></li>
                                <li class="divider"></li>
                                <li><a href="logout"><i class="fa fa-power-off"></i> <?php echo LABEL_MENUCERRARSESION ?></a></li>
                            </ul>
                        </li>

                    </ul>
                </div><!--/.nav-collapse -->
            </div><!--/.container -->
        </div>
        <?php
        echo $contenido;
        ?>
        <div id="footer" class="navbar navbar-fixed-bottom">
            <div class="container">
                <p class="text-muted credit text-center">© 2014 <a href="index.html">betporra.com</a>| DESIGNED AND DEVELOPPED BY <a href="index.html">betporra.com - Jesús Rodrigo - Iván Gallego</a></p>
            </div>
        </div>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <!--<script src="web/js/bootstrap-slider.js"></script>-->
        <script src="web/js/simple-slider.min.js"></script>
        <script type="text/javascript" src="web/js/bootstrap-filestyle.js"></script>
        <script type="text/javascript" src="web/js/bootstrap-datepicker.js"></script>

        <script type="text/javascript">
            //$("[data-slider]")
            $(".data-slider-left")
                    .each(function() {
                        var input = $(this);
                        $("<span class='label label-success' style='font-size:1em;vertical-align: text-top;margin-right:2px;'> ")
                                .addClass("output")
                                .insertBefore($(this));
                    })
                    .bind("slider:ready slider:changed", function(event, data) {
                        if (data.value == 5) {
                            $(this).prevAll(".output:first").html('5+');
                        } else {
                            $(this).prevAll(".output:first").html(data.value.toFixed(0));
                        }

                    });

            $(".data-slider-right")
                    .each(function() {
                        var input = $(this);
                        $("<span class='label label-success' style='font-size:1em;vertical-align: text-top;'>")
                                .addClass("output")
                                .insertAfter($(this));
                    })
                    .bind("slider:ready slider:changed", function(event, data) {
                        if (data.value == 5) {
                            $(this).nextAll(".output:first").html('5+');
                        } else {
                            $(this).nextAll(".output:first").html(data.value.toFixed(0));
                        }

                    });

            $(":file").filestyle({buttonName: "btn-primary", buttonText: " Seleccionar archivo"});

            $('document').ready(function() {
                $('#fecha_nacimiento').datepicker({
                    format: "dd-mm-yyyy",
                    startView: 2,
                    autoclose: true,
                    language: "es",
                    todayHighlight: true
                });
            });
            //$('#datetimepicker').datetimepicker({});

        </script>
    </body>
</html>
